<template>
	<top-bar></top-bar>
	<div class="create-battle-title" @click="back">
		<div class="create-battle-title-icon"><img src="@/static/img/icon/navigate.png" /></div>
		<div class="create-battle-title-text">创建对战</div>
	</div>
	<div class="people-count-tab">
		<div class="people-count-title">玩家人数</div>
		<div class="people-count-items">
			<div v-for="people in peoples.items" class="people-count-item" :key="people.value" :class="{ active: people.value == peoples.selectedValue }" @click="peoples.selectedValue = people.value">{{ people.label }}</div>
		</div>
	</div>
	<div class="battle-box">
		<div class="battle-box-item" :class="{ empty: box == null }" v-for="(box, index) in boxes" :key="index">
			<template v-if="box == null">
				<img class="battle-box-item-empty-img" src="@/static/img/battle/createBattle/box-empty.png" @click="chooseBox.show = true" />

				<span class="battle-box-item-empty-title" @click="chooseBox.show = true">添加宝箱</span>
			</template>
			<template v-else>
				<img class="battle-box-item-img" :src="processImageUrl(box.img)" />

				<span class="battle-box-item-title">{{ box.name }}</span>
				<div class="battle-box-item-price">
					<img class="battle-box-item-price-icon" src="@/static/img/battle/createBattle/icon_coin.png" />
					<span class="battle-box-item-price-value">{{ box.price }}</span>
				</div>

				<div class="battle-box-item-number">
					<div class="battle-box-item-number-operator sub" @click="changeBoxItemCount(box, -1)"><img src="@/static/img/battle/createBattle/box-count+sub.png" /></div>
					<div>{{ box.count }}</div>
					<div class="battle-box-item-number-operator add" @click="changeBoxItemCount(box, 1)"><img src="@/static/img/battle/createBattle/box-count+add.png" /></div>
				</div>
			</template>
		</div>
	</div>
	<div class="battle-switches">
		<div class="battle-switch-item">
			<div class="label">
				<div class="title">
					<img class="icon" src="@/static/img/battle/createBattle/icon-dgxz.png" />
					<span>帝国旋转</span>
				</div>
				<div class="description">切换以在开箱时突出显示高级物品</div>
			</div>
			<div class="operator">
				<el-switch v-model="type1" active-color="#fa6418" disabled></el-switch>
			</div>
		</div>
		<div class="battle-switch-item">
			<div class="label">
				<div class="title">
					<img class="icon" src="@/static/img/battle/createBattle/icon-uno.png" />
					<span>Uno逆转模式</span>
				</div>
				<div class="description">扭转运气，开出总价值最低的玩家将赢得全部奖励!</div>
			</div>
			<div class="operator">
				<el-switch v-model="type2" active-color="#fa6418"></el-switch>
			</div>
		</div>
		<div class="battle-switch-item">
			<div class="label">
				<div class="title">
					<img class="icon" src="@/static/img/battle/createBattle/icon-srdz.png" />
					<span>私人对战</span>
					<img class="tag" src="@/static/img/battle/createBattle/type3-info.png" @mouseover="changeMouseChange(true)" @mouseout="changeMouseChange(false)" />
				</div>
				<div class="description">只有拥有链接的玩家才能加入/查看</div>
			</div>
			<div class="operator">
				<el-switch v-model="type3" active-color="#fa6418"></el-switch>
			</div>
			<div class="tag-title" v-if="tag.show" @mouseover="changeMouseChange(true)" @mouseout="changeMouseChange(false)">在Uno Reverse模式中，开箱物品总价值最低的玩家赢得对战。平局则通过标准的决胜局来定胜负，决胜局的获胜者将赢得对战。</div>
		</div>
	</div>
	<div class="statics">
		<div class="time"><span class="label">回合：</span><span class="value">6</span></div>
		<div class="price">
			<img class="icon" src="@/static/img/battle/createBattle/icon_coin.png" />
			<span class="value">{{ staticsPrice() }}</span>
		</div>
		<div class="button" @click="createRoom">创建并支付</div>
	</div>
	<choose-box v-if="chooseBox.show" @close="chooseBox.show = false" @updateBoxList="updateBoxList"></choose-box>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs, computed } from 'vue';
import { processImageUrl } from '@/utils';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import TopBar from '@/components/top-bar/Index.vue';
import ChooseBox from './components/CreateBattle/ChooseBox.vue';
import BattleService from "@/services/BattleService";
import {it} from "vuetify/locale";

export interface IProps {
	show: boolean;
}

export default defineComponent({



	setup(props, { emit }) {

		// 创建一个响应式状态对象
		const state = reactive({
			loading: false,
			show: props.show,
			peoples: {
				items: [
					{ label: '1', value: 1 },
					{ label: '2', value: 2 },
					{ label: '3', value: 3 },
					{ label: '4', value: 4 }
				],
				selectedValue: 1
			},
			boxes: [
				{
					id: 1,
					name: '宝箱1',
					price: 120.01,
					img: '',
					count: 0
				},
				null
			],
			type1: false,
			type2: true,
			type3: true,
			tag: {
				show: false,
				timeOutHandle: 0
			},
			chooseBox: {
				show: false
			}
		});

		const router = useRouter();

		onMounted(() => {});

		function changeBoxItemCount(box: any, type: number) {
			if (box.count + type < 0) {
				return;
			}
			box.count += type;
		}

		function changeMouseChange(type: boolean) {
			if (type) {
				state.tag.show = true;
				clearTimeout(state.tag.timeOutHandle);
			} else {
				state.tag.timeOutHandle = setTimeout(() => {
					state.tag.show = false;
				}, 200);
			}
		}

		function staticsPrice() {
			return state.boxes
				.filter((item) => item != null)
				.map((item) => {
					return item.price * item.count;
				})
				.reduce((a, b) => {
					return a + b;
				})
				.toFixed(2);
		}

		function btnSubmit() {
           router.push('/battle/battleWaiting');
		}
    const updateBoxList =(boxList)=>{
     state.boxes = boxList
    }
    const createRoom = () => {
      if (!state.boxes.length) {
        ElMessage.warning("还未选择箱子");
        return;
      }

      const { peoples, boxes, type2, type3 } = state;
      state.loading = true;
      const box_ids=[]
      boxes.forEach((item,index)=>{
        for (let i = 0; i <item.count; i++) {
          box_ids.push(item.id)
        }
      })
      BattleService.createRoom({
        num: peoples.selectedValue,
        is_reverse: type2,
        is_private: type3,
        box_ids: box_ids
      }).then((res) => {
            ElMessage.success("创建房间成功");
            const roomId = res.data.data.room_id;
            emit("close");
            emit("created", roomId);
            // router.push(`/battle/${roomId}`);
            router.push(`/battle/battleWaiting`);
          })
          .finally(() => {
            state.loading = false;
          });
    };
    function back() {
           router.push('/battle');
		}
		function onClose() {
			emit('close', false);
		}

		return {
			...toRefs(state),
			props,
			changeBoxItemCount,
			changeMouseChange,
			processImageUrl,
			staticsPrice,
			btnSubmit,
      createRoom,
      updateBoxList,
			onClose,
			back
		};
	},
	components: {
		TopBar,
		ChooseBox
	},
	props: {
		show: {
			type: Boolean,
			default: () => false
		}
	}
});
</script>

<style scope lang="scss">
.create-battle-title,
.people-count-tab,
.battle-box,
.battle-switches,
.statics {
	width: 1284px;
	margin: 0 auto;
}

.create-battle-title {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 40px auto;

	.create-battle-title-icon {
		width: 9.56px;
		height: 14.43px;
		margin-left: 4px;

		> img {
			width: 9.56px;
			height: 14.43px;
		}
	}

	.create-battle-title-text {
		margin-left: 24px;
		font-size: 26px;
	}
}

.people-count-tab {
	display: flex;
	justify-content: flex-start;
	align-items: center;

	height: 70px;
	opacity: 1;
	border-radius: 14px;
	background: rgba(28, 28, 35, 1);

	.people-count-title {
		font-size: 16px;
		margin: 0 12px 0 32px;
	}

	.people-count-items {
		display: flex;
		flex-wrap: wrap;
		background: rgba(21, 21, 26, 1);
		padding: 4px 0;
		height: 38px;
		cursor: pointer;

		.people-count-item {
			width: 80px;
			height: 30px;
			margin: 0 4px;
			line-height: 30px;
			text-align: center;
			color: rgba(164, 166, 187, 1);
			font-size: 16px;

			&.active {
				opacity: 1;
				border-radius: 4px;

				color: white;
				background-color: rgba(43, 44, 56, 1);
			}
		}
	}
}

.battle-box {
	margin-top: 20px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;

	.battle-box-item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20px;
		margin-right: 20px;
		width: 207px;
		height: 264px;
		opacity: 1;
		border-radius: 14px;
		background: rgba(28, 28, 35, 1);

		&.empty {
			justify-content: center;
		}

		.battle-box-item-img {
			width: 132px;
			height: 132px;
			margin: 16px auto;
		}

		.battle-box-item-title {
			font-size: 16px;
		}

		.battle-box-item-price {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 4px 0;

			.battle-box-item-price-icon {
				width: 16px;
				height: 16px;
				margin: 0 4px;
				object-fit: fill;
			}

			.battle-box-item-price-value {
				font-size: 14px;
				color: rgba(255, 255, 255, 1);
			}
		}

		.battle-box-item-number {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 175px;
			height: 38px;
			border-radius: 6px;
			background: rgba(23, 23, 28, 1);

			.battle-box-item-number-operator {
				width: 30px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				font-size: 24px;
				background: rgba(43, 44, 56, 1);

				&.sub {
					margin-left: 4px;
				}

				&.add {
					margin-right: 4px;
				}
			}
		}

		.battle-box-item-empty-img {
			width: 36px;
			height: 36px;
			object-fit: fill;
			border: 1px dashed rgba(164, 166, 187, 1);
			border-spacing: 5px;
		}

		.battle-box-item-empty-title {
			color: rgba(164, 166, 187, 1);
			font-size: 16px;
		}
	}
}

.battle-switches {
	display: flex;
	justify-content: space-between;
	align-content: center;

	.battle-switch-item {
		position: relative;
		width: 422px;
		border-radius: 14px;
		background: rgba(28, 28, 35, 1);

		padding: 18px 24px 18px 32px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.label {
			display: flex;
			flex-direction: column;

			.title {
				display: flex;
				align-items: center;

				.icon {
					width: 16px;
					height: 16px;
				}

				span {
					font-size: 16px;
					text-indent: 16px;
				}

				.tag {
					cursor: pointer;
					margin-left: 16px;
					width: 16px;
					height: 16px;
				}
			}

			.description {
				font-size: 12px;
				text-indent: 32px;
				color: rgba(164, 166, 187, 1);
				margin: 4px 0;
			}
		}

		.tag-title {
			position: absolute;
			left: -46px;
			top: -108px;
			width: 384px;
			height: 146px;
			font-size: 14px;
			padding: 38px 42px;
			background-image: url('@/static/img/battle/createBattle/tag-title.png');
		}
	}
}

.statics {
	height: 80px;
	margin-top: 8px;
	border-radius: 14px;
	background: rgba(28, 28, 35, 1);
	font-size: 16px;
	display: flex;
	justify-content: flex-end;
	align-items: center;

	.time,
	.price {
		display: flex;
		align-items: center;

		.value {
			margin-right: 32px;
		}
	}

	.price {
		.icon {
			width: 20px;
			height: 20px;
			margin: 0 4px;
		}
	}

	.button {
		width: 181px;
		height: 48px;
		opacity: 1;
		border-radius: 8px;
		background: rgba(250, 100, 24, 1);
		text-align: center;
		line-height: 48px;
	}
}
</style>
